html {
  box-sizing: border-box;
  //根元素字体大小；10 / 16 = 62.5%，采用rem单位时，1rem = 10px
  font-size: 62.5%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body {
  width: 100%;
  height: 100vh;
  background-color: #0a0a0a;
  font-family: sans-serif;
}
$start-color: #307a96;
$end-color: cyan;

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  .block {
    width: calc(100% / var(--amount));
    height: 10px;
    border: 1px solid $start-color;
    animation: oscillate 2s infinite ease-in-out;
  }
}

@keyframes oscillate {
  25% {
    border-color: $end-color;
    height: 100px;
  }
  50% {
    border-color: $start-color;
    height: 10px;
  }
}
